'use client'

import { Fragment } from 'react'
import { Dialog, Transition } from '@headlessui/react'
import { Purchase, PurchaseStatus } from '@prisma/client'

interface ViewInboundDialogProps {
  purchase: any // 使用序列化后的类型
  open: boolean
  onClose: () => void
}

export function ViewInboundDialog({ purchase, open, onClose }: ViewInboundDialogProps) {
  return (
    <Transition show={open} as={Fragment}>
      <Dialog onClose={onClose} className="relative z-50">
        <Transition.Child
          as={Fragment}
          enter="ease-out duration-300"
          enterFrom="opacity-0"
          enterTo="opacity-100"
          leave="ease-in duration-200"
          leaveFrom="opacity-100"
          leaveTo="opacity-0"
        >
          <div className="fixed inset-0 bg-black/30" />
        </Transition.Child>

        <div className="fixed inset-0 overflow-y-auto">
          <div className="flex min-h-full items-center justify-center p-4">
            <Transition.Child
              as={Fragment}
              enter="ease-out duration-300"
              enterFrom="opacity-0 scale-95"
              enterTo="opacity-100 scale-100"
              leave="ease-in duration-200"
              leaveFrom="opacity-100 scale-100"
              leaveTo="opacity-0 scale-95"
            >
              <Dialog.Panel className="w-full max-w-2xl transform overflow-hidden rounded-lg bg-white shadow-xl transition-all">
                <div className="border-b border-gray-200 bg-white px-6 py-4">
                  <Dialog.Title as="h3" className="text-lg font-medium text-gray-900">
                    入库单详情
                  </Dialog.Title>
                </div>

                <div className="bg-white px-6 py-6">
                  <div className="grid grid-cols-2 gap-6 mb-6">
                    <div>
                      <dt className="text-sm font-medium text-gray-500">入库单号</dt>
                      <dd className="mt-1 text-sm text-gray-900">{purchase.code}</dd>
                    </div>
                    <div>
                      <dt className="text-sm font-medium text-gray-500">状态</dt>
                      <dd className="mt-1">
                        <span className={`px-2 inline-flex text-xs leading-5 font-semibold rounded-full ${
                          purchase.status === 'PENDING' 
                            ? 'bg-yellow-100 text-yellow-800'
                            : purchase.status === 'COMPLETED'
                            ? 'bg-green-100 text-green-800'
                            : 'bg-red-100 text-red-800'
                        }`}>
                          {purchase.status === 'PENDING' ? '待入库' : 
                           purchase.status === 'COMPLETED' ? '已入库' : '已取消'}
                        </span>
                      </dd>
                    </div>
                    <div>
                      <dt className="text-sm font-medium text-gray-500">供应商</dt>
                      <dd className="mt-1 text-sm text-gray-900">{purchase.supplier.name}</dd>
                    </div>
                    <div>
                      <dt className="text-sm font-medium text-gray-500">联系人</dt>
                      <dd className="mt-1 text-sm text-gray-900">{purchase.supplier.contact}</dd>
                    </div>
                    <div>
                      <dt className="text-sm font-medium text-gray-500">联系电话</dt>
                      <dd className="mt-1 text-sm text-gray-900">{purchase.supplier.phone}</dd>
                    </div>
                    <div>
                      <dt className="text-sm font-medium text-gray-500">创建时间</dt>
                      <dd className="mt-1 text-sm text-gray-900">
                        {new Date(purchase.createdAt).toLocaleString()}
                      </dd>
                    </div>
                  </div>

                  <div className="mt-8">
                    <h4 className="text-sm font-medium text-gray-900 mb-4">入库商品</h4>
                    <div className="overflow-x-auto">
                      <table className="min-w-full divide-y divide-gray-200">
                        <thead className="bg-gray-50">
                          <tr>
                            <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                              商品名称
                            </th>
                            <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                              数量
                            </th>
                            <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                              单价
                            </th>
                            <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                              金额
                            </th>
                          </tr>
                        </thead>
                        <tbody className="bg-white divide-y divide-gray-200">
                          {purchase.items.map((item: any) => (
                            <tr key={item.id}>
                              <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
                                {item.product.name}
                              </td>
                              <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                                {item.quantity}
                              </td>
                              <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                                ¥{parseFloat(item.price).toFixed(2)}
                              </td>
                              <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                                ¥{parseFloat(item.amount).toFixed(2)}
                              </td>
                            </tr>
                          ))}
                        </tbody>
                        <tfoot>
                          <tr>
                            <td colSpan={3} className="px-6 py-4 text-sm font-medium text-gray-900 text-right">
                              总计：
                            </td>
                            <td className="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">
                              ¥{parseFloat(purchase.totalAmount).toFixed(2)}
                            </td>
                          </tr>
                        </tfoot>
                      </table>
                    </div>
                  </div>
                </div>

                <div className="border-t border-gray-200 bg-gray-50 px-6 py-4 flex justify-end">
                  <button
                    type="button"
                    onClick={onClose}
                    className="inline-flex justify-center rounded-md border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700 shadow-sm hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2"
                  >
                    关闭
                  </button>
                </div>
              </Dialog.Panel>
            </Transition.Child>
          </div>
        </div>
      </Dialog>
    </Transition>
  )
} 